<template>
    <a-modal 
        v-model="visible"
        :bodyStyle="bstyle"
        :footer="null"
        @cancel="cancel"
        :width="750" 
        :closable="isShowCloseBtn"
        :keyboard="false"
        :maskClosable="false"
        v-dragModal
    >
        <template slot="title">
             <img 
                ondragstart="return false"
                oncontextmenu="return false" 
                v-if="$store.state.language == 'zh' && $store.state.commonModule.oemConfig.copyright_zh" :src="$store.state.commonModule.oemConfig.copyright_zh"
                alt="fbs_logo"
            />
            <img 
                ondragstart="return false"
                oncontextmenu="return false"
                v-if="$store.state.language == 'en' && $store.state.commonModule.oemConfig.copyright_en" :src="$store.state.commonModule.oemConfig.copyright_en"
                alt="fbs_logo_en"
            />
        </template>
        <template slot="closeIcon">
            <a-icon type="close-circle" style="color: #fff" />
        </template>
        <div class="top_img">
            <img 
                ondragstart="return false"
                oncontextmenu="return false"
                src="../../../static/images/png/ibt_sq.png" alt="ibt">
        </div>
        <div>
            <div>
                <p style="background-color: #fff; padding: 0.5rem 1rem; margin-bottom: 1rem; border-radius: 4px;">
                    <span>{{$t('License_file')}}：</span>
                    <a-upload
                        name="file1"
                        :before-upload="beforeUpload"
                        :headers="headers"
                        :fileList="fileList1"
                        @change="handleChange1"
                    >
                    <!-- :action="allurl + 'license/upload'" -->
                        <a-button type="primary" ghost>
                            {{$t('Click_upload')}} <a-icon type="cloud-upload" />
                        </a-button>
                    </a-upload>
                </p>
                <div>
                    <a-card size="small" :title="$t('Copyright_information')">
                        <p class="list">
                            <span class="tit">{{$t('Cluster_ID')}}：</span>{{ msgData.cluster_id }}
                        </p>
                        <p class="list">
                            <span class="tit">{{$t('Authorization_type')}}：</span> 
                            <span :style="{ color: msgData.lic_type == 3 || msgData.lic_type == 4 || msgData.lic_type == 5 ? '#ff4d4f' : ''}"> 
                                {{ msgData.lic_type == 0 ? $t('Node') : 
                                    msgData.lic_type == 1 ? $t('Capacity') : 
                                    msgData.lic_type == 2 ? $t('Disc_bit') : 
                                    msgData.lic_type == 3 ? $t('Trial') : 
                                    msgData.lic_type == 4 ? $t('Unauthorized') : 
                                    msgData.lic_type == 5 ? $t('Machine_info_mismatch') : '' }}
                            </span>
                        </p>
                        <!-- <p class="list">
                            <span class="tit">{{$t('Authorization_files')}}：</span> {{ msgData.lic_fiename }}
                        </p> -->
                        <p class="list">
                            <span class="tit">{{$t('Current_cluster_status')}}：</span> 
                            <span :style="{ color: msgData.cluster_status == 2 ? '#ff4d4f' : ''}"> 
                                {{ msgData.cluster_status == 0 ?  $t('Usable') : 
                                    msgData.cluster_status == 1 ?  $t('Read_only') : 
                                    msgData.cluster_status == 2 ?  $t('Unusable') : '' }}
                            </span>
                        </p>
                        <p class="list" v-if="msgData.lic_type == 3 || msgData.lic_type == 4 || msgData.lic_type == 5">
                            <span class="tit">{{$t('Current_cluster_capacity')}}：</span> {{ msgData.cluster_size }} <!--之前这里写了TiB-->
                        </p>
                        <p class="list" v-if="msgData.lic_type == 3 || msgData.lic_type == 4 || msgData.lic_type == 5">
                            <span class="tit">{{$t('Current_cluster_nodes')}}：</span> {{ msgData.cluster_node }} {{$t('Pcs')}}
                        </p>

                        <p class="list" v-if="msgData.lic_type == 0 || msgData.lic_type == 1 || msgData.lic_type == 2">
                            <span class="tit">
                                {{ msgData.lic_type == 0 ? $t('Current_cluster_nodes') :
                                   msgData.lic_type == 1 ? $t('Current_cluster_capacity') :
                                   msgData.lic_type == 2 ? $t('Current_cluster_Disc_bit') : ''}}：</span> 
                                {{ msgData.real_value }} 
                                {{ msgData.lic_type == 0 ? $t('Pcs') :
                                   msgData.lic_type == 1 ? 'TiB' :
                                   msgData.lic_type == 2 ? $t('Disc_bit') : ''}}  
                        </p>
                        <p class="list" v-if="msgData.lic_type == 0 || msgData.lic_type == 1 || msgData.lic_type == 2">
                            <span class="tit">
                                {{ msgData.lic_type == 0 ? $t('Authorized_nodes') :
                                   msgData.lic_type == 1 ? $t('Authorized_capacity') :
                                   msgData.lic_type == 2 ? $t('Authorized_disc_bit') : ''}}：</span>
                            {{ msgData.lic_values }} 
                            {{ msgData.lic_type == 0 ? $t('Pcs') :
                                   msgData.lic_type == 1 ? 'TiB' :
                                   msgData.lic_type == 2 ? $t('Disc_bit') : ''}}
                        </p>
                        <p class="list">
                            <span class="tit">{{$t('Expiration_time')}}：</span> {{ msgData.lic_time }} 
                            <span :style=" { color: msgData.time_day < 0 || !msgData.time_day ?' #f00' : 'none' }"> ( {{ msgData.time_day ? msgData.time_day : '--'}} {{$t('Day')}} )</span>
                        </p>
                    </a-card>
                    <a-card size="small">
                        <template slot="title">
                            <span style="font-weight: bold">{{$t('License')}}</span>
                            <span style="float: right">
                                <a-tooltip placement="topRight">
                                    <template slot="title">
                                    {{$t('Download_machine_info')}}
                                    </template>
                                    <!-- <a :href="allurl + 'license/download_lic'" download> -->
                                        <a-button type="primary" size="small" style="margin-right: 1rem" @click="downloadMachineInfo">
                                            <img src="../../../static/images/png/ic_download_normal.png" alt="download_img">
                                        </a-button>
                                    <!-- </a> -->
                                </a-tooltip>
                                <a-tooltip placement="topRight">
                                    <template slot="title">
                                    {{$t('Collect_machine_info')}}
                                    </template>
                                    <a-button type="primary" size="small" @click="gather">
                                        <img src="../../../static/images/png/ic_gather.png" alt="gather_img">
                                    </a-button>
                                </a-tooltip>
                            </span>
                        </template>
                        <a-table :loading="loading" :columns="rightColumns" :pagination="false" rowKey="total" 
                                 :data-source="rightData" :scroll="{ y: 106 }" size="small" :locale="defaultSetting">
                            <span slot="distribute" slot-scope="distribute">
                                <span v-if="distribute">
                                    <a-icon type="check-circle" style="color: #04bcad" /> 
                                    {{$t('Authorized')}}  
                                    <span v-if="msgData.time_day && msgData.time_day < 0">{{$t('Expired')}}</span>
                                </span> 
                                <span v-else>
                                    <a-icon type="exclamation-circle"  style="color: #fc3456"/> 
                                    {{$t('Unauthorized')}}
                                    <span v-if="msgData.time_day && msgData.time_day < 0">{{$t('Expired')}}</span>
                                </span> 
                            </span>
                            <!-- <span slot="distribute" slot-scope="distribute">
                                <span v-if="distribute"><a-icon type="check-circle" style="color: #04bcad" /> {{$t('Authorized')}}</span> 
                                <span v-else><a-icon type="exclamation-circle"  style="color: #fc3456"/> {{$t('Unauthorized')}}</span> 
                            </span> -->
                            <span slot="info_collection" slot-scope="info_collection">
                                <span v-if="info_collection"><a-icon type="check-circle" style="color: #04bcad" /> {{$t('Collect_complete')}}</span> 
                                <span v-else><a-icon type="exclamation-circle"  style="color: #fc3456"/> {{$t('Waiting_to_collect')}}</span> 
                            </span>
                        </a-table>
                    </a-card>
                </div>
                <!-- <a-card size="small">
                    <p style="padding: 1rem; text-align: center;">暂未授权：请先上传对应的许可文件</p>
                </a-card> -->
            </div>
        </div>
    </a-modal>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'

import request from '@/request/request'

export default {
    props:['toflag', 'powerData', 'isShowCloseBtn'],
    components: { EmptyData },
    data() {
        return {
            visible: false,
            bstyle: {"background-color": "var(--themeColor)", "padding-top": "0"},
            headers: {
                authorization: 'authorization-text',
            },
            fileList1: [],
            rightColumns: [
                {
                    title: this.$t('Node'),
                    dataIndex: 'host_name',
                    width: 80
                },
                {
                    title: this.$t('IP_address'),
                    dataIndex: 'ipadd',
                },
                {
                    title: this.$t('Authorization_status'),
                    dataIndex: 'distribute',
                    scopedSlots: { customRender: 'distribute' },
                },
                {
                    title: this.$t('Collection_status'),
                    dataIndex: 'info_collection',
                    scopedSlots: { customRender: 'info_collection' },
                }
            ],
            rightData: [],
            msgData: '',
            loading: false,
            defaultSetting: {emptyText:<EmptyData />}
        };
    },
    computed: {
        getlanguage() {
            return this.$store.state.language
        }
    },
    watch: {
        toflag(val){
            this.visible = val;
        },
        powerData(newValue) {
            this.msgData = newValue;
            this.rightData = this.msgData.nodes_lic_status;
        },
        getlanguage(val) { //监听语言切换，切换data组件内的多语言
            this.rightColumns = [
                {
                    title: this.$t('Node'),
                    dataIndex: 'host_name',
                    width: 80
                },
                {
                    title: this.$t('IP_address'),
                    dataIndex: 'ipadd',
                },
                {
                    title: this.$t('Authorization_status'),
                    dataIndex: 'distribute',
                    scopedSlots: { customRender: 'distribute' },
                },
                {
                    title: this.$t('Collection_status'),
                    dataIndex: 'info_collection',
                    scopedSlots: { customRender: 'info_collection' },
                }
            ]
        }
    },
    mounted() {
        // this.getData()
    },
    methods: {
        getData() {
            request('get', 'license/').then(res => {
                if(res.data.flag == 1) {
                    this.model(res.data.id) //返回模板
                    this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
                }else {
                    this.msgData = res.data.msg;
                    this.rightData = this.msgData.nodes_lic_status
                    //判断是否快到期了，进行弹窗提示
                    // if((new Date()).valueOf - msgData.lic_time < xxx) {

                    // }
                }
            });
        },
        cancel() {
            this.$emit('omodal',false)
            this.$emit('rightTo',false)
        },
        handleChange1(info) {
            let fileList = [...info.fileList];
            //限制只能传一个文件
            fileList = fileList.slice(-1);
            this.fileList1 = fileList
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} file upload failed.`);
            }
        },

        beforeUpload(file) {
            this.fileList1 = [file]; //上传一个
            // this.fileList1 = [...this.fileList1, file];
            this.handleUpload();
            return false;
        },

        //上传许可文件
        handleUpload() {
            const { fileList1 } = this;
            const formData = new FormData();
            fileList1.forEach(file => {
                formData.append('file1', file);
                // console.log('上传的文件', formData.get('file'))
            });
            this.$axios({
                method: 'post',
                url: this.allurl + 'license/upload',
                headers: {
                    'Content-Type': 'multipart/form-data',
                    "authorization": 'Bearer ' + JSON.parse(localStorage.getItem('authToken')), 
                },
                data: formData
            }).then(res => {
                // console.log('上传许可文件', res)
                if(res.data.success) {
                    this.$emit('updateRight')
                    this.$message.success(this.$t('Upload-ok'));
                }else {
                    this.$message.error(res.data.msg);
                }
            })
        },

        //下载机器信息
        downloadMachineInfo() {
            request('post', 'license/download',{}, {
                responseType: 'blob'
            })
            .then(res => {
                // console.log('下载机器信息', res)
                if(res.status == 200) {
                    this.downloadBlobCSV(
                        res.data,
                        'application/octet-stream',
                        `machine.tar`
                    );
                    this.$message.success(this.$t('Download-machine-ok'));
                    // window.open(this.allurl + 'license/download_lic');
                }else {
                    this.$message.error(this.$t('Check-machine-info'));
                }
            }).catch(err => {
                console.log(err);
            })
        },

        //二进制流下载tar文件
        downloadBlobCSV(data, type, filename) {
            let blob = new Blob([data],{
                type
            });
            const url = window.URL.createObjectURL(blob);
            // let filename = '文件流下载' + '.csv';
            const link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', filename);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },

        // 信息收集
        gather() {
            this.loading = true
            request('post', 'license/collection').then(res => {
                if (res.data.flag === 0) {
                    this.$message.success(this.$t('Collect_complete'));
                } else {
                    this.$message.error(this.$t('Collect_failure'));
                }
                this.getData()
                this.loading = false
            }).catch(err => {
                this.loading = false
            })
        },
    }
}
</script>
<style scoped>
::v-deep .ant-modal-header{
    background-color: var(--themeColor);
    border-bottom: none;
}
.top_img {
    width: 100%;
    text-align: center;
}
::v-deep .ant-card-head {
    border-bottom: none;
}
::v-deep .ant-card-body {
    padding-top: 0 !important;
}
.ant-card-bordered {
    border: none;
}
.list {
    background-color: #f1f8ff;
}
.tit {
    background-color: #e6f4ff;
    padding: 0.2rem 0 0.2rem 1rem;
    display: inline-block;
    width: 30%;
    margin-right: 1rem;
}
</style>
